
import { FileText, Database, Zap } from 'lucide-react'

interface ModeSelectorProps {
  mode: 'single' | 'batch' | 'generator'
  onModeChange: (mode: 'single' | 'batch' | 'generator') => void
}

export function ModeSelector({ mode, onModeChange }: ModeSelectorProps) {
  return (
    <div className="card">
      <div className="card-content">
        <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start space-y-3 sm:space-y-0 sm:space-x-4">
          <span className="text-sm font-medium text-gray-700">选择发送模式:</span>
          <div className="flex space-x-3">
            <button
              onClick={() => onModeChange('single')}
              className={`btn hover-lift ${
                mode === 'single' ? 'btn-primary' : 'btn-outline'
              }`}
            >
              <FileText className="w-4 h-4 mr-2" />
              单条消息
            </button>
            <button
              onClick={() => onModeChange('batch')}
              className={`btn hover-lift ${
                mode === 'batch' ? 'btn-primary' : 'btn-outline'
              }`}
            >
              <Database className="w-4 h-4 mr-2" />
              批量发送
            </button>
            <button
              onClick={() => onModeChange('generator')}
              className={`btn hover-lift ${
                mode === 'generator' ? 'btn-primary' : 'btn-outline'
              }`}
            >
              <Zap className="w-4 h-4 mr-2" />
              数据生成
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
